<!DOCTYPE html>
<html>
<head>
  <style>
    .logo-container {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: '方正清刻本悦宋简体', serif;
      background: linear-gradient(135deg, #B3D9FF 20%, #66B3FF 80%);
      padding: 4px 8px;
      border-radius: 24px;
      box-shadow: 0 2px 8px rgba(74,144,226,0.2);
    }

    .cloud-icon {
      width: 32px;
      height: 24px;
      position: relative;
    }

    .cloud-icon::before,
    .cloud-icon::after {
      content: '';
      position: absolute;
      background: #FFF;
      border-radius: 50%;
    }

    .cloud-icon::before {
      width: 24px;
      height: 24px;
      left: 0;
      top: 0;
      box-shadow:
        16px 0 0 #FFF,
        8px -8px 0 #FFF,
        24px -4px 0 #FFF;
    }

    .cloud-icon::after {
      width: 16px;
      height: 16px;
      left: 8px;
      top: 8px;
      background: #4A90E2;
      mix-blend-mode: multiply;
    }

    .logo-text {
      font-size: 24px;
      color: #2A5C9E;
      text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
    }

    /* 悬停动画 */
    .logo-container:hover .cloud-icon::after {
      animation: cloud-flow 1.5s infinite;
    }

    @keyframes cloud-flow {
      0%,100% { transform: translateY(0) }
      50% { transform: translateY(-4px) }
    }
  </style>
</head>
<body>

<div class="logo-container">
  <div class="cloud-icon"></div>
  <div class="logo-text">云启课堂</div>
</div>

</body>
</html>
